html {
  font: system;
  font-size: 11pt;
  var(accent): window-accent-color;
  var(accent-text): #fff;
  var(lighten5): morph(window-accent-color, lighten:60%);
  var(lighten4): morph(window-accent-color, lighten:53%);
  var(lighten3): morph(window-accent-color, lighten:41%);
  var(lighten2): morph(window-accent-color, lighten:30%);
  var(lighten1): morph(window-accent-color, lighten:12%);
  var(darken1): morph(window-accent-color, darken:3%);
  var(darken2): morph(window-accent-color, darken:6%);
  var(darken3): morph(window-accent-color, darken:9%);
  var(darken4): morph(window-accent-color, darken:12%);
  var(accent1): morph(window-accent-color, rotate:-20deg);
  var(accent2): morph(window-accent-color, rotate:-10deg);
  var(accent3): morph(window-accent-color, rotate:10deg);
  var(accent4): morph(window-accent-color, rotate:20deg);
  var(panel): #fff;
  var(panel-text): #000;
  var(danger-color): #db3737; // red
  var(success-color): #0f9960; // green
  var(warning-color): #d9822b; //gold? 
  var(button-face): color(lighten4);
  var(button-text): #000;
  var(widget-back): #fff;
  var(widget-text): #000;
  var(disabled-text): #999;
}

html[ui-size="compact"] {
  font-size: 9pt;
}

@set std-button < std-button-base {
  :root {
    aspect: Ripple url(theme.js);
    color: color(button-text);
    background: color(button-face);
    box-shadow: #888 1dip 1dip 1dip;
    cursor: pointer;
    padding: 0.5em 1em;
  }
  :root:hover {
    background: color(lighten3);
  }
  :root:active {
    background: color(lighten5);
  }
  :root:tab-focus {
    outline: 1dip dashed color(accent) -4dip;
  }
  :root:not(:disabled).primary, :root:not(:disabled)[role="default-button"] {
    var(button-face): color(accent);
    color: color(accent-text);
    fill: color(accent-text);
  }
  :root.primary:active, :root[role="default-button"]:active {
    background: color(accent);
  }
  :root.danger {
    var(button-face): color(danger-color);
    color: color(accent-text);
  }
  :root.success {
    var(button-face): color(success-color);
    color: color(accent-text);
  }
  :root.warning {
    var(button-face): color(warning-color);
    color: color(accent-text);
  }
  :root:disabled {
    background: color(button-face-disabled);
    color: color(disabled-text);
    box-shadow: none;
  }
}

@set std-number-edit < std-number-edit-base {
  :root {
    display: block;
    background: transparent;
    color: color(widget-text);
    padding-top: 0.5em;
    border-bottom: 1dip solid #bbb;
    width: 8em;
    background: url(stock:block) center bottom no-repeat;
    background-size: 0% 2dip;
    background-clip: border-box;
    fill: color(accent);
    transition: background-size quad-out 160ms;
    flow: horizontal;
    border-spacing: 1dip;
    line-height: 1.6em;
  }
  :root::marker {
    margin-top: 0.5em;
    line-height: 1.6em;
    width: *;
    margin-right: 3.2em;
    transform-origin: 0% 0%;
    color: #777;
    content: attr(placeholder);
    transition: transform quad-out 160ms;
    z-index: -1;
  }
  :root:owns-focus::marker, :root:not(:empty)::marker {
    transform: translate(0, -80%) scale(0.7);
  }
  :root:owns-focus {
    background-size: 100% 2dip;
  } //:root:owns-popup,
  //:root:focus            { text-selection: color(selection-text) color(selection); }
  //:root:disabled         { background:color(widget-disabled); color:color(widget-disabled-text); }  
  //:root:tab-focus        { outline:@STD-OUTLINE-FOCUS; }  
  :root>caption {
    width: *;
    line-height: 1.6em;
    height: 1.6em; //padding:0.2em 0 0.2em 0.4em;
  } //:root:disabled > caption { color:color(widget-disabled-text); }  
  //:root:not([step]) > caption { border-radius: length(border-radius); }
  :root>button {
    height: *;
    min-height: 5dip;
    width: 1.6em;
    box-shadow: none;
    foreground-position: 50% 50%;
    foreground-size: 5dip;
    foreground-repeat: no-repeat;
    cursor: pointer;
  }
  /*:root > button:hover
  {
    transition:none;
    background:color(button-hover);
  }
  :root > button:active
  {
    background:color(button-hover);
  }
  :root:disabled > button
  {
    background: color(widget-disabled);
    color: color(widget-disabled-text);
    fill: color(widget-disabled-text);
  }*/
  :root>button.minus {
    padding: 0;
    foreground-image: url(stock:chevron-down);
  }
  :root>button.plus {
    padding: 0;
    foreground-image: url(stock:chevron-up);
  }
}

editbox {
  style-set: std-edit;
}

/* radio button */

radio {
  style-set: std-radio;
}

@set std-radio {
  :root {
    behavior: radio;
    display: block;
    width: max-content;
    line-height: 1.4em;
    padding: * 0.6em * 1.8em;
    cursor: pointer;
  }
  :root::marker {
    size: 13dip;
    border: 2dip solid #bbb;
    border-radius: 8dip;
    margin: * * * 0;
    background: url(stock:disk) 50% 50% no-repeat;
    background-size: 8dip;
    fill: transparent;
    transition: border-color linear 160ms, fill linear 160ms;
  }
  :root:checked::marker {
    fill: color(accent);
    border-color: color(accent);
  }
  :root:tab-focus {
    outline: 1dip dashed color(normal) 2dip;
  }
}

/* checkbox button */

checkbox {
  style-set: std-checkbox;
}

@set std-checkbox {
  :root {
    behavior: check;
    display: block;
    width: max-content;
    line-height: 1.4em;
    padding: * 0.6em * 1.8em;
    cursor: pointer;
  }
  :root::marker {
    size: 12dip;
    border: 2dip solid #bbb;
    border-radius: 3dip;
    margin: * * * 0;
    background: url(path:M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z) 50% 50% no-repeat;
    background-size: 0.8em;
    background-color: color(widget-back);
    fill: transparent;
    stroke: none;
    transition: border-color linear 160ms, background-color linear 160ms;
  }
  :root:checked::marker {
    fill: color(widget-back);
    background-color: color(accent);
    border-color: color(accent);
  }
  :root[mixed]:empty::marker {
    background-image: url(path:M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z);
    background-size: 0.5em;
    fill: color(widget-text);
  }
  :root:tab-focus {
    outline: 1dip dashed color(accent) 2dip;
  }
}

@set std-toggle {
  :root {
    behavior: check;
    display: block;
    width: 3em;
    height: 1em;
    padding: 0.3em;
    border-radius: 0.6em;
    background-clip: content-box;
    background: #ddd;
    cursor: pointer;
    transition: background-color linear 160ms;
  }
  :root>option {
    visibility: none;
  }
  :root:checked {
    background-color: color(lighten4);
  }
  :root::marker // the knob
    {
    display: block;
    background-color: #bbb;
    size: 1.4em;
    margin: * * * 0;
    border-radius: 0.7em;
    box-shadow: #aaa 1dip 1dip 1dip;
    transform: translate(0em, 0);
    transition: background-color linear 160ms, transform quad-out 160ms;
  }
  :root:checked::marker {
    transform: translate(2em, 0);
    background-color: var(accent, #000);
  }
  :root:tab-focus {
    outline: 1dip dashed color(normal) 2dip;
  }
}

slider {
  display: inline-block;
  style-set: std-hslider;
}

@set std-hslider < std-hslider-base {
  :root {
    display: block;
    background: #ddd;
    padding: 7dip;
    background-clip: content-box;
    background-image: url(stock:block);
    background-repeat: no-repeat;
    background-position: 0 0;
    fill: color(accent);
    width: 8em;
    height: 2dip;
    background-size: var(slider-position, 0px) 2dip; // "value" part 
  }
  :root>knob {
    cursor: pointer;
    size: 16dip;
    box-shadow: #aaa 1dip 1dip 1dip;
    background: color(accent);
    foreground: none;
    border: none;
    border-radius: 8dip;
    padding: 0;
  }
  :root>knob::marker {
    content: attr(value);
    size: 32dip 36dip;
    line-height: 32dip;
    text-align: center;
    background: no-repeat url(path:M8 2.1c1.1 0 2.2 0.5 3 1.3 0.8 0.9 1.3 1.9 1.3 3.1s-0.5 2.5-1.3 3.3l-3 3.1-3-3.1c-0.8-0.8-1.3-2-1.3-3.3 0-1.2 0.4-2.2 1.3-3.1 0.8-0.8 1.9-1.3 3-1.3z);
    background-size: 32dip 36dip;
    fill: color(lighten4);
    stroke: none;
    transform: translate(-8dip, -100%) scale(0);
    transition: transform 160ms;
    transform-origin: 50% 100%;
    filter: drop-shadow(1dip, 1dip, 1dip, #999);
  }
  :root:focus>knob::marker, :root:hover>knob::marker {
    transform: translate(-8dip, -100%) scale(1);
  }
}

input {
  display: block;
  width: 8em;
}

@set std-select-dropdown < std-select-dropdown-base {
  :root {
    aspect: Ripple url(theme.js);
    color: color(button-text);
    background: color(button-face);
    box-shadow: #888 1dip 1dip 1dip;
    cursor: pointer;
    padding: 0.5em 1em;
  }
  :root:hover {
    background: color(lighten3);
  }
  :root:active {
    background: color(lighten5);
  }
  :root:tab-focus {
    outline: 1dip dashed color(accent) -4dip;
  }
  :root:disabled {
    background: color(button-face-disabled);
    color: color(disabled-text);
    box-shadow: none;
  }
  :root>button {
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
  }
}

@set std-progress < std-progress-base {
  :root {
    display: block;
    width: 8em;
    height: 0.28em;
    border-style: none;
    padding: 0;
    margin: * 0;
    background: color(lighten5);
  }
  :root:not(:busy)::marker {
    width: length(progress-percent);
    height: *;
    background: color(accent);
    stroke: none;
    stroke-width: 0;
  }
  :root:busy::marker {
    width: *;
    height: *;
    background-repeat: no-repeat;
    background-image: url(path: M 0 0 L 9 0 L 9 9 L 0 9 Z);
    background-size: 25% 100%;
    fill: color(accent);
    stroke: none;
    stroke-width: 0;
    animation: 1.2s infinite alternate std-progress-slide;
  }
}